<div class="pal clearfix">
	<a href="${ctx}/profile/${topicBo.userId}" class="lfloat mrm">
		<c:choose>
			<c:when test="${topicBo.userThumbnailId == null || empty topicBo.userThumbnailId}">
				<img src="${ctx}/res/images/default_portrait.png" class="thumb thumb_50"/>
			</c:when>
			<c:otherwise>
				<img src="${ctx}/image/${topicBo.userThumbnailId}" class="thumb thumb_50"/>
			</c:otherwise>
		</c:choose>
	</a>
	<div class="clearfix ui-overflow-hidden">
		<div class="rfloat mlm">
			<div class="ui-inline-block ui-inline-block-middle" style="height:50px;"></div><div class="ui-inline-block ui-inline-block-middle">
				<div class="mhs">
					<shiro:authenticated>
						<c:if test="${currentUser.userId != topicBo.userId}">
							<c:choose>
								<c:when test="${isFollowing}">
									<a href="#follow_unfollow_link" data-user-id="${topicBo.userId}" class="btn-follow btn silver small following">
								</c:when>
								<c:otherwise>
									<a href="#follow_unfollow_link" data-user-id="${topicBo.userId}" class="btn-follow btn silver small follow">
								</c:otherwise>
							</c:choose>
							<span class="z-follow">Follow</span><span class="z-following">Following</span><span class="z-unfollow">Unfollow</span></a>
						</c:if>
					</shiro:authenticated>
				</div>
			</div>
		</div>
		<div class="ui-overflow-hidden">
			<div class="ui-inline-block">
				<div class="ui-inline-block ui-inline-block-middle" style="height:50px;"></div>
					<div class="ui-inline-block ui-inline-block-middle">
						<div class="fsxxl fwb ui-line-height-one mbs"><a class="dark" href="${ctx}/profile/${topicBo.userId}">${topicBo.userName}</a></div>
						<div class="fsl fcl">${topicBo.displayDate}</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="ul"></div>

<shiro:authenticated>
	<div class="phl ptl clearfix">
		<div class="lfloat">
			<c:choose>
				<c:when test="${currentUser.userId == topicBo.userId}">
					<a class="btn silver small" href="${ctx}/topic/edit/${topicBo.topicId}">Edit</a>
				</c:when>
				<c:otherwise>
					<c:choose>
						<c:when test="${isLiking}">
							<a href="#like_unlike_link" data-topic-id="${topicBo.topicId}" class="btn-like btn silver small unlike">
						</c:when>
						<c:otherwise>
							<a href="#like_unlike_link" data-topic-id="${topicBo.topicId}" class="btn-like btn silver small like">
						</c:otherwise>
					</c:choose>
					<span class="z-like">Like</span><span class="z-unlike">Unlike</span></a>
				</c:otherwise>
			</c:choose>
			<a class="btn silver small mls comment" href="#add_comment_link" style="display: none;"><span>Comment</span></a>
		</div>
		<div class="rfloat">
			<c:if test="${numOfUsersWhoLike > 0}">
				<span class="like-button fcl">${numOfUsersWhoLike}</span>
			</c:if>
			<c:if test="${numOfComments > 0}">
				<span class="mls comment-button fcl">${numOfComments}</span>
			</c:if>
		</div>
	</div>
</shiro:authenticated>

<div class="pal">
	<c:if test="${!(topicBo.imageId == null || empty topicBo.imageId)}" >
		<div class="topic-image-holder mbl">
			<img src="${ctx}/image/${topicBo.imageId}" />
		</div>
	</c:if>
	<div class="fsl">
		${topicBo.description}
	</div>
</div>
